<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0 ,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  </head>
  <body> 
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      input{  
        background:none;  
        outline:none;  
        border:none;
        }
        input{  
        background:none;  
        outline:none;  
        }
        button{
        outline: none;
        background-color: transparent;
        border: 0;
        }
input:focus{   
	border:none;
}
      .wrap {
        position: fixed;
        display: block;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
      }
      .dom_overlay_container {
        width: auto;
        height: auto;
      }
      #animation_container {
        background-color: rgba(0, 0, 0, 0);
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        z-index: 9;
      }
      .videoBox {
        width: auto;
        height: auto;
        margin: 0 auto;
      }
      .video {
        width: 100%;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
        z-index: -9999;
        box-sizing: border-box;
      }
      .imgs {
        width: 100px;
        height: 100px;
        background-repeat: no-repeat;
        /* padding-left: 30px; */
      }
      .btns {
        width: 100%;
        display: flex;
        position: relative;
        top: -130px;
        z-index: 99;
        /* justify-content: space-evenly;   */
      }
      .btns :nth-child(1) {
        margin-left: 50px;
        transition: all 1s;
        /* background-image:url('./assest/下載.png') ;
          background-position:0px 0px; */
      }
      .btns :nth-child(1):hover {
        transform: scale(0.8, 0.8);
      }
      .btns :nth-child(2) {
        margin-left: 144px;
        transition: all 1s;

        /* background-image:url('./assest/下載.png') ;
          background-position:-103px 0px; */
      }
      .btns :nth-child(2):hover {
        transform: scale(0.8, 0.8);
      }
      .btns :nth-child(3) {
        margin-left: 148px;
        transition: all 1s;
        /* background-image:url('./assest/下載.png') ;
          background-position:0px -109px; */
      }
      .btns :nth-child(3):hover {
        transform: scale(0.8, 0.8);
      }
      .btns :nth-child(4) {
        margin-left: 144px;
        transition: all 1s;
        /* background-image:url('./assest/下載.png') ;
          background-position:-102px -109px;; */
      }
      .btns :nth-child(4):hover {
        transform: scale(0.8, 0.8);
      }
      .imgs {
      }
      .loginwrap {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 98;
      }
      .loginWrap .loginMask {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 90;
      }
      .loginBox {
        position: relative;
        margin: 100px auto;
        width: 518px;
        height: 523px;
        background-image: url(https://cdn-file.taojike.com.cn/wan/fc/b477ae2d/reg/bg.png);
      }
    </style>
    <style>
        .input,
        .error,
        .button,
        .agree,
        .boxFooter .third {
          position: absolute;
          
        }
        .loginBox {
            /* position: relative; */
          z-index: 100;
          width: 518px;
          height: 523px;
          background-image: url(https://cdn-file.taojike.com.cn/wan/fc/b477ae2d/reg/bg.png);
        }
        .loginBox .formGroup .input.username {
          margin-left: 0;
          margin-bottom: 0;
          padding-top: 0;
          width: 187px;
          height: 40px;
          left: 194px;
          top: 153px;
          font-size: 14px;
          color: #6e5e4e;
        }
        .loginBox .formGroup .error.username {
          left: 194px;
          top: 193px;
        }
        .loginBox .formGroup .succues.username {
            color:green;
        }
        .loginBox .formGroup .input.password {
          margin-left: 0;
          margin-bottom: 0;
          padding-top: 0;
          width: 187px;
          height: 40px;
          left: 194px;
          top: 223px;
          font-size: 14px;
          color: #6e5e4e;
        }
        .loginBox .formGroup .error.password {
          left: 194px;
          top: 263px;
        }
        .loginBox .formGroup .input input {
          height: 40px;
          line-height: 40px;
          color: #6e5e4e;
        }
        .loginBox .formGroup .input.captcha {
          position: absolute;
          margin-left: 0;
          margin-bottom: 0;
          padding-top: 0;
          width: 187px;
          height: 40px;
          left: 194px;
          top: 153px;
          font-size: 14px;
          color: #6e5e4e;
        }
        .loginBox .formGroup .input.captcha .change {
          display: none;
        }
        .loginBox .formGroup .input.vcode {
          margin-left: 0;
          margin-bottom: 0;
          padding-top: 0;
          width: 187px;
          height: 40px;
          left: 194px;
          top: 223px;
          font-size: 14px;
          color: #6e5e4e;
        }
        .loginBox .formGroup .error.vcode {
          left: 194px;
          top: 263px;
        }
        .loginBox .formGroup .error {
          padding-left: 0;
          width: 220px;
          height: 26px;
          font-size: 13px;
          color: #fb0000;
        }
        .loginBox .formGroup .buttons .button {
          width: 175px;
          height: 70px;
          background-image: url(https://cdn-file.taojike.com.cn/wan/fc/b477ae2d/reg/btn.gif);
          left: 171px;
          top: 299px;
        }
        .loginBox .formGroup .buttons p {
          margin-top: 0;
          padding-left: 0;
          line-height: 21px;
          left: 151px;
          top: 387px;
          font-size: 12px;
          color: #6e5e4e;
        }
        .loginBox .formGroup .buttons p a {
          left: 151px;
          top: 387px;
          font-size: 12px;
          color: #6e5e4e;
        }
        .loginBox .formGroup .buttons p span {
          float: left;
          display: block;
          padding: 0;
          background-position: -21px 0;
          width: 21px;
          height: 21px;
          background-image: url(https://cdn-file.taojike.com.cn/wan/fc/b477ae2d/reg/check.png);
        }
        .loginBox .formGroup .buttons p span.active {
          background-position: 0 0;
          width: 21px;
          height: 21px;
          background-image: url(https://cdn-file.taojike.com.cn/wan/fc/b477ae2d/reg/check.png);
        }
        .loginBox .boxFooter .third.weixin {
          left: 273px;
          top: 443px;
          background-image: url(https://cdn-img.taojike.com.cn/a/202105/28/60b0994eae3ba.png);
          width: 46px;
          height: 46px;
        }
        .loginBox .boxFooter .third.qq {
          left: 204px;
          top: 443px;
          background-image: url(https://cdn-img.taojike.com.cn/a/202105/27/60af898eda78e.png);
          width: 46px;
          height: 46px;

        }
    </style>
    <div id="app"  v-on:click="showMask()" class="wrap">
      <div class="dom_overlay_container">
        <div class="videoBox">
          <video
            id="videoDom"
            class="video"
            muted
            autoplay
            loop
            src="./assest/sp.mp4"
          ></video>
          <audio
            style="display: none"
            controls
            autoplay
            loop="loop"
            preload="auto"
            src="./assest/sound1.mp3"
            id="music"
            type="audio/mp3"
          >
            你的浏览器版本太低，不支持audio标签
          </audio>
        </div>
        <!-- <div id="animation_container">
        <canvas
          id="canvas"
          style="display: block"
        ></canvas>
      </div> -->
        <!-- <div id="_preload_div__" style="inset: auto 0px; display: none">
        <img
          id="loadBg"
          src="https://cdn-file.taojike.com.cn/wan/fc/b477ae2d/animate/images/bg.jpg"
        />
      </div> -->
        <div class="btns">
          <img class="imgs" src="./assest/图层 2.png" alt="" />
          <img class="imgs" src="./assest/图层 3.png" alt="" />
          <img class="imgs" src="./assest/图层 4.png" alt="" />
          <img class="imgs" src="./assest/图层 6.png" alt="" />
        </div>
      </div>
      <div
        v-if="isshow"
        class="loginWrap"
        style="
          width: 100%;
          height: 100%;
          position: fixed;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          z-index: 99;
        "
      >
        <div v-if="isshow" class="loginMask"></div>
        <div v-if="isshow" class="loginBox">
          <div class="contentBox">
            <div class="boxHeader"><div class="clear"></div></div>
            <div class="formGroup boxForm">
              <div class="input username">
                <input
                  class="smscode_val"
                  type="text"
                  name="username"
                  placeholder="使用字母、数字、下划线"
                  v-model = 'username'
                />
              </div>
              <div  class="error username">
                <span v-if='validata'>{{errorMsg}}</span>
              </div>
              <div class="input password">
                <input
                  type="password"
                  name="password"
                  placeholder="请输入密码"
                  v-model = 'password'
                />
              </div>
              <div class="error password">
                  <span></span>
                </div>
              <div class="buttons">
                <button class="fl button submitRegister" type="button"></button>
                <div class="clear"></div>
                <p class="agree">
                  <span class="checkbox active"></span>
                  <a
                    href="https://yxtg.taojike.com.cn/account/protocol?type=register&app="
                    data-text="用户协议及隐私政策"
                    target="_blank"
                    >我已阅读并同意《用户协议及隐私政策》</a>
                </p>
              </div>
            </div>
            <div class="formGroup boxValid">
              <!-- <div class="input captcha">
                <div class="fl image captcha_img"></div>
                <div class="fr change captcha_change">换一张</div>
                <div class="clear"></div>
              </div>
              <div class="input vcode">
                <input
                  type="text"
                  name="vcode"
                  class="captcha_code"
                  placeholder="请输入验证码"/>
                <input
                  type="hidden"
                  name="vckey"
                  value=""
                  class="captcha_vckey"
                />
              </div> -->
              <div class="error vcode"><span></span></div>
              <div class="buttons">
                <button  v-on:click="submit()" class="fl button submitCaptcha" type="button"></button>
                <div class="clear"></div>
                <p>&nbsp;</p>
              </div>
            </div>
            <div class="boxFooter">
              <div class="third weixin" data-third="weixin"></div>
              <div class="third qq" data-third="qq"></div>
            </div>
            <div class="alertBox"><p></p></div>
          </div>
        </div>
      </div>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "Hello Vue!",
          isshow:false,
          username:'',
          password:'',
          validata : false
        },
        watch:{
            username : function(val, oldVal){
                // oldVal = /^[A-Za-z0-9]{6,16}$/
            }
        },
        methods: {
            showMask(){
                this.isshow = true;
            },
            submit(){
                this.validataHandle()
                // 为给定 ID 的 user 创建请求
                // this.addScriptTag(`http://www.xiaolijoy.com/media/user/login.html?account=${this.username}&password=${this.password}`)
                // .then(function (response) {
                //     console.log(response);
                // })
                // .catch(function (error) {
                //     console.log(error);
                // });
                    $.ajax({
                        url:'http://www.xiaolijoy.com/media/user/login.html',
                        type:'post',
                        dataType:'json',
                        data:{  account: this.username,
                                password: this.password,zdlogin:1},
                        success:function(data){
                            console.log(data)
                        },
                        error:function(xhr,i,e){
                            alert(e)
                        }
                })

                // axios.post('http://www.xiaolijoy.com/media/user/login.html', {
                //     account: this.username,
                //     password: this.password
                // })
                // .then(function (response) {
                //     console.log(response);
                // })
                // .catch(function (error) {
                //     console.log(error);
                // });
                // window.location.href=`http://fenfa.5144wan.com/api/game?type=game&pid=1226&uid=${this.username}&serverpassword=${this.password}`
            },   
            addScriptTag(src) {
                var script = document.createElement('script');
                script.setAttribute("type","text/javascript");
                script.src = src;
                document.body.appendChild(script);
            },
            validataHandle(){
                let re =  /^[A-Za-z0-9]{6,16}$/
                this.validata =  re.test(this.username) 
                console.log(this.validata)
                
                this.validata = !this.validata
                if(this.validata){
                    this.errorMsg = '5~16字符，由字母或数字组成！'
                }else{
                    this.errorMsg = "输入正确！"
                }
            }
        },
        // mounted :function(){
        //     this.$nextTick(function () {
        //         console.log(this.$refs.usernameInput)
        //     })
        // }
      });
    </script>
    <script>
      // $("#app").on("mousedown",function(e){
      //     if(e.which==1){
      //         $("#reg_outer,.mask").show();
      //     }
      // })
      // addVideo("//file.7youxi.com/yeyou/new_swf/cnm156p/");

      const videoDom = document.getElementById("videoDom");
      const audioDom = document.getElementById("music");
      document.body.addEventListener(
        "mousedown",
        function () {
          videoDom.muted = false;
          audioDom.play();
        },
        false
      );

      // let test = document.createElement('div');
      // test.id = 'test';
      // test.innerHTML = '测试事件';
      // document.body.appendChild(test);
      // test.addEventListener('mousedown', function(){
      //     console.log('hello jTool');
      // }, false)
      // var myEvent = new Event('mousedown');
      // test.dispatchEvent(myEvent); // => true

      // Element.prototype.trigger = function(eventName){
      //     this.dispatchEvent(new Event(eventName));
      // }
      // let target = document.querySelector('#test');  // Element
      // target.trigger('mousedown'); // => 'hello jTool'

      // NodeList.prototype.trigger = function(eventName){
      // [].forEach.call(this, function(item, index){
      //     item.dispatchEvent(new Event(eventName));
      //     });
      // }
      // target = document.querySelectorAll('#test'); // NodeList
      // target.trigger('mousedown');  // => hello jTool

      // target = document.querySelectorAll('#test'); // NodeList
      // target.trigger('mousedown');  // => Uncaught TypeError: target.trigger is not a function
    </script>
    <script type="text/javascript">
      // 判断pc浏览器是否缩放，若返回100则为默认无缩放，如果大于100则是放大，否则缩小
      function detectZoom() {
        var ratio = 0,
          screen = window.screen,
          ua = navigator.userAgent.toLowerCase();
        if (window.devicePixelRatio !== undefined) {
          ratio = window.devicePixelRatio;
        } else if (~ua.indexOf("msie")) {
          //检测IE浏览器的版本
          if (screen.deviceXDPI && screen.logicalXDPI) {
            ratio = screen.deviceXDPI / screen.logicalXDPI;
          }
        } else if (
          window.outerWidth !== undefined &&
          window.innerWidth !== undefined
        ) {
          ratio = window.outerWidth / window.innerWidth;
        }
        if (ratio) {
          ratio = Math.round(ratio * 100);
        }
        return ratio;
      }
      //window.onresize 事件可用于检测页面是否触发了放大或缩小。
      $(window).on("resize", function () {
        isScale();
      });
      //判断PC端浏览器缩放比例不是100%时的情况
      function isScale() {
        var rate = detectZoom();
        if (rate != 100) {
          //如何让页面的缩放比例自动为100,'transform':'scale(1,1)'没有用，又无法自动条用键盘事件，目前只能提示让用户如果想使用100%的比例手动去触发按ctrl+0
          alert(
            "当前页面不是100%显示，请按键盘ctrl+0恢复100%显示标准，以防页面显示错乱！"
          );
        }
      }

      //阻止pc端浏览器缩放js代码
      //由于浏览器菜单栏属于系统软件权限，没发控制，我们着手解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面的情况，只能通过js来控制了
      // jqeury version
      $(document).ready(function () {
        // chrome 浏览器直接加上下面这个样式就行了，但是ff不识别
        $("body").css("zoom", "reset");
        $(document).keydown(function (event) {
          //event.metaKey mac的command键
          if (
            (event.ctrlKey === true || event.metaKey === true) &&
            (event.which === 61 ||
              event.which === 107 ||
              event.which === 173 ||
              event.which === 109 ||
              event.which === 187 ||
              event.which === 189)
          ) {
            event.preventDefault();
          }
        });
        $(window).bind("mousewheel DOMMouseScroll", function (event) {
          if (event.ctrlKey === true || event.metaKey) {
            event.preventDefault();
          }
        });
      });
      window.onkeydown =
        window.onkeyup =
        window.onkeypress =
          function (event) {
            // 判断是否按下F12，F12键码为123
            if (event.keyCode = 123) {
                event.preventDefault(); // 阻止默认事件行为
                window.event.returnValue = false;
            }
          };
    </script>
  </body>
</html>
